<template>
	<view class="integral">
		<!--头部-->
		<view class="head">
			<view class="head-info">
				<view class="integral-info">
					<text>当前积分</text>
					<text>{{integral || 0}}</text>
				</view>
				<view class="rules">
					<view class="button" @click="goRules()">
						<text>使用规则</text>
						<text class="iconfont icon-doubleright"></text>
					</view>
				</view>
			</view>
		</view>
		<!--轮播图-->
		<view class="adv-info">
			<view class="swiper-list">
				<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" :indicator-dots="true" :indicator-color="'rgba(255, 255, 255, .5)'"
				 :indicator-active-color="'#fff'">
					<block v-for="(item, index) in swiperList" :key="index">
						<swiper-item @click="handleSwiper(item)">
							<image :src="item.imgUrl" class="swiper-img"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		<!--优选兑换-->
		<view class="you-list">
			<view class="head-child">
				<view class="title">
					<text>优选兑换</text>
				</view>
				<view class="img">
					<image src="../../static/img/integral/youxuan.jpg"></image>
				</view>
			</view>
			<view class="you-item">
				<block v-for="(item,index) in youList" :key="index">
					<view class="item" @click="handleGoDetail(item)">
						<view class="img">
							<image :src="item.listImage"></image>
						</view>
						<view class="title">
							<text>{{item.title}}</text>
						</view>
						<view class="price">
							<text>{{item.needIntegral}}</text>
							<text>积分</text>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!--积分商品-->
		<view class="integral-goods">
			<view class="head-child">
				<view class="title">
					<text>商品兑换</text>
				</view>
				<view class="img">
					<image src="../../static/img/integral/gengduolist.jpg"></image>
				</view>
			</view>
			<view class="integral-items">
				<block v-for="(item,index) in goodsList" :key="index" >
					<view class="item" @click="handleGoDetail(item)">
						<view class="img">
							<image :src="item.listImage"></image>
						</view>
						<view class="title">
							<text>{{item.title}}</text>
						</view>
						<view class="tips">

						</view>
						<view class="price">
							<text>{{item.needIntegral}}</text>
							<text>积分</text>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!--more-->
		<view class="more" v-if='isNoMore'>
			<view>
				<image src="../../static/img/integral/more.jpg"></image>
			</view>
		</view>
		<footLogo></footLogo>
	</view>
</template>

<script>
	var currentPage = 1

	import footLogo from "@/components/foot-logo/footLogo.vue"
	export default {
		components: {
			footLogo
		},
		data() {
			return {
				integral: '',
				swiperList: [],
				youList: [],
				goodsList: [],
				isNoMore: false,
			}
		},

		onShow: function(option) {
			currentPage = 1
			this.getIntegral(this.pub.getUserInfo().memberId)
			this.getSwiperList()
			this.getYouList()
			this.getGoodsList()
		},
		onReachBottom: function() {

			console.log("this.isNoMore", this.isNoMore)
			if (!this.isNoMore) {

				this.getGoodsList('')

			}

		},
		methods: {
			handleSwiper: function(item) {
				let id = item.jumpLink
				let integral = this.integral
				uni.navigateTo({
					url: '/pages/shopping_new/shoppingdetail?id=' + id + '&isIntegral=1&integral=' + integral,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			getIntegral: function(memberId) {
				let params = {
					channelType: this.pub.channelType,
					memberId: memberId
				}
				this.$postApi(this.$path.GET_INTERGRAL_BY_ID, params).then(res => {
					console.log("登录用户积分数据返回-------->", res.data)
					if (res.data.success) {
						let userinfo = this.pub.getUserInfo()
						userinfo.integral = res.data.data.integral
						this.pub.setUserInfo(userinfo)

					}
					this.integral = this.pub.getUserInfo().integral
				})
			},
			goRules: function() {
				uni.navigateTo({
					url: '/pages/rules/rules',
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			getSwiperList: function() {
				let params = {
					channelType: this.pub.channelType,
					pageIndex: '1',
					attribute: '积分商城-轮播推荐',
					locationType: '12' //12为积分商城
				}
				this.$postApi(this.$path.BANNER_LIST, params).then(res => {
					console.log("轮播swiper商品返回数据---------->", res.data)
					if (res.data.success) {
						this.swiperList = res.data.data.list
					} else {
						this.swiperList = []
					}
				})
			},
			getYouList: function() {
				let params = {
					attribute: '积分商城-优选兑换',
					pageIndex: '1',
					pageSize: '3'
				}
				this.$postApi(this.$path.INTEGRAL_LIST, params).then(res => {
					console.log("积分商城-优选兑换返回数据----------->", res.data)
					if (res.data.success) {
						this.youList = res.data.data.list
					} else {
						this.youList = []
					}
				})
			},
			getGoodsList: function() {
				let params = {
					pageSize: '4',
					pageIndex: currentPage
				}
				this.$postApi(this.$path.INTEGRAL_LIST, params).then(res => {
					console.log("积分商城返回数据----------->", res.data)
					if (res.data.success) {
						let list = res.data.data.list
						if (currentPage == 1) {
							var content = list
						} else {
							var content = this.goodsList.concat(list)
						}

						var isNoMore = false
						var isEmpty = false

						if (content.length == 0) {
							isEmpty = true;
							isNoMore = false;
							console.log("content=0")
						} else if (!res.data.data.hasNextPage) {
							console.log("hasNextPage = false")
							//已经无再多数据
							isNoMore = true;
							isEmpty = false;
						}
						currentPage++;
						this.isNoMore = isNoMore;
						this.isEmpty = isEmpty;
						this.goodsList = content
					} else {
						this.goodsList = []
					}
				})
			},
			handleGoDetail: function(item) {
				let id = item.id
				let integral = this.integral
				uni.navigateTo({
					url: '/pages/shopping_new/shoppingdetail?id=' + id + "&isIntegral=1&integral=" + integral,
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.integral {
		margin: 0;
		padding: 0;
		font-size: 34upx;
		background: #f2f2f2;
		min-height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.head,
	.adv-info,
	// .you-list,
	.integral-goods,
	.more {
		padding: 20upx;
	}
	.you-list{
		padding-left: 20upx;
		padding-right: 20upx;
	}
	.integral-goods{
		padding-top: 60upx;
	}
	.head-info {
		border-radius: 20upx;
		height: 147upx;
		background: url(../../static/img/integral/head.jpg) center no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx;

		.integral-info {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 9upx;
			opacity: 0.9;
			display: flex;
			align-items: center;

			text:last-child {
				margin-left: 10upx;
				font-size: 56upx;
				font-family: HYCuHeiJ;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				line-height: 9upx;
			}
		}

		.button {
			width: 195upx;
			height: 58upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(255, 255, 255, 1);
			opacity: 0.92;
			border-radius: 29upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(236, 100, 48, 1);
			line-height: 42upx;
			padding: 5upx;
		}
	}

	.adv-info {
		.swiper-list {
			height: 400upx;
			border-radius: 20upx;
		}

		.swiper {
			min-height: 360upx;
		}

		image {
			border-radius: 20upx;
		}
	}

	.head-child .title {
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(26, 26, 26, 1);
		// line-height:8upx;
	}

	.head-child .img {
		height: 130upx;
		border-radius: 20upx 20upx 0 0;
		margin-top: 30upx;

		image {
			border-radius: 20upx 20upx 0 0;
		}
	}

	.you-item {
		display: flex;
		background: #fff;
		justify-content: space-between;
		padding-bottom: 20upx;
		padding-left: 16upx;
		border-radius: 0 0 20upx 20upx;

		.item:last-child {
			border: 0;
		}

		.item {
			// margin-left: 16upx;
			margin-top: 20upx;
			width: 31.5%;
			padding-right: 20upx;
			border-right: 1upx solid rgba(237, 237, 237, 1);

			.img {
				height: 132upx;
			}

			.title {
				margin-top: 12upx;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.price {
				font-size: 30upx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: rgba(255, 94, 4, 1);
				// letter-spacing: 1;
				display: flex;
				align-items: center;
				margin-top: 15upx;
				text:last-child {
					margin-left: 5upx;
					font-size: 22upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}

	.integral-items {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 10upx;
		background: #fff;
		border-radius: 0 0 20upx 20upx;
		.item:last-child{
			border-bottom:none;
		}
		.item:nth-last-child(2){
			border-bottom:none;
		}
		.item:nth-child(2n-1){
			border-right: 1upx solid #EDEDED;
		}
		.item {
			width: 50%;
			padding: 10upx;
			// border-right: 1upx solid #EDEDED;
			border-bottom: 1upx solid #EDEDED;
			.img {
				height: 210upx;
			}

			.title {
				margin-top: 10upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.price {
				margin-top: 20upx;
				font-size: 30upx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: rgba(255, 94, 4, 1);
				// letter-spacing: 1;
				display: flex;
				align-items: center;

				text:last-child {
					margin-left: 5upx;
					font-size: 26upx;
					font-family: PingFang SC;
					// font-weight: bold;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}

	.more {
		view {
			height: 350upx;

			image {
				border-radius: 20upx;
			}
		}
	}
</style>
